<script setup>
import { filter } from "lodash-es";
import { ref } from "vue";

let icoHrefList = ref([
    {
        name: 'mastergo',
        href: 'https://mastergo.com/favicon.ico',        
    },
    {
        name:'deepseek',
        href: 'https://www.deepseek.com/favicon.ico',
    },
    {
        name:'github',
        href: 'https://github.githubassets.com/favicon.ico',
    },
])

const cutIco = (name) =>{
    let link = document.querySelector('link[rel="icon"]');
    let href = icoHrefList.value.filter(item => item.name === name)[0].href
    if(link){       
        link.href = href;        
    }else{
        let link = document.createElement('link');
        link.rel = 'icon';
        link.href = href;
        document.head.appendChild(link);
    }
    document.title = name;
}
</script>

<template>
    <h1>更换ico</h1>
    <button @click="cutIco('mastergo')">更换成 mastergo</button>
    <button  @click="cutIco('deepseek')">更换成 deepseek</button>
    <button  @click="cutIco('github')">更换成 github</button>
</template>

<style lang="scss" scoped>
    button{
        padding: 10px 20px;
        margin: 10px;
        background: pink;
    }
</style>